<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    <li>亲戚
    <ul>
        <li>习大大</li>
        <li>马大姐</li>
        <li>老干妈</li>
    </ul></li>
    <li>同事
    <ul>
        <li>马云</li>
        <li>马化腾</li>
        <li>马保国</li></ul></li>
    <li>女友们
    <ul>
        <li>貂蝉</li>
        <li>迪丽热巴</li>
        <li>王昭君</li></ul></li>
</ul>
<script src="../js/jquery-1.4.2.js"></script>
<script>
    //让所有二级ul隐藏
    $('li>ul').hide()
    //选择第一次li添加点击事件
    $('body>ul>li').click(function () {
        //在事件方法中 this代表触发事件的事件源 this属于js对象
        //先把点击的li对象(js对象转为jq对象)里面的ul得到 控制隐藏显示切换
        $(this).children().toggle()
        //得到点击意外的两个li里面的ul并隐藏
        $(this).siblings().children().hide()
    })
</script>
</body>
</html>